<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div class="container-search" v-if="showSearch">
      <!-- 控件容器 -->
      <div class="search">
        <!-- 表头搜索控件 -->
        <div class="input" style="width: 25%">
          <el-input placeholder="搜索关键词" size="small" v-model="keywords" clearable>
          </el-input>
        </div>
        <div class="input" style="width: 15%">
          <el-input placeholder="设备编号" size="small" v-model="args.GasSerialId" clearable>
          </el-input>
        </div>

        <div class="input" style="width: 15%">
          <el-input placeholder="使用单位" size="small" v-model="args.SydwName" clearable>
          </el-input>
        </div>
        <div class="input" style="width: 10%">
          <el-button type="primary" style="width: 100%" size="small">查询</el-button>
        </div>
        <div class="input" style="width: 10%">
          <el-button style="width: 100%" size="small">重置</el-button>
        </div>
        <div class="input" style="width: 10%; margin-left: 4.5%">
          <el-button type="text" size="small">高级筛选</el-button>
        </div>
      </div>
      <div class="table">
        <!-- 表格容器 -->
        <div class="container">
          <el-table v-loading="loading" :data="tableData" max-height="700" style="width: 100%">
            <el-table-column fixed prop="id" label="序号" width=""></el-table-column>
            <el-table-column prop="" label="设备编号" width="">
              <template slot-scope="scope">   {{ scope.row.f002}} </template>
            </el-table-column>
            <el-table-column prop="f003" label="设备类型" width=""></el-table-column>
            <el-table-column prop="f001" label="使用单位" width=""></el-table-column>
            <el-table-column prop="" label="定检数据" width="">
              <template slot-scope="scope">
                <el-button type="text" style="text-decoration: underline; color: #606266" @click="lookUpData(scope.row)">
                  查看
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="f029" show-overflow-tooltip label="点检数据" width="90"> </el-table-column>
            <el-table-column prop="f030" show-overflow-tooltip label="检测数据" width="90"> </el-table-column>
            <el-table-column prop="f031" show-overflow-tooltip label="维修数据" width="90"> </el-table-column>
            <el-table-column prop="f032" show-overflow-tooltip label="监控数据" width="90"> </el-table-column>
            <el-table-column prop="f033" show-overflow-tooltip label="监测数据" width="90"> </el-table-column>
          </el-table>
          <el-dialog @close="handleDialogCloed" :visible.sync="dialogTableVisible" :append-to-body="true" ><!--   :visible.sync="dialogTableVisible"-->
            <div class="block" ref="table1" style="text-align: center">
              <div style="text-align: center;font-size: 22px"><strong>储罐检验报告</strong></div>
              <table border="1" >
                <tr>
                  <td>储罐类型</td>
                  <td>{{ lookUp.f003 }}</td>
                  <td>罐顶型式</td>
                  <td>{{ lookUp.f004 }}</td>
                </tr>
                <tr>
                  <td>设计规范</td>
                  <td>{{ lookUp.f005 }}</td>
                  <td>公称容积</td>
                  <td>{{ lookUp.f006 }}</td>
                </tr>
                <tr>
                  <td>设计压力</td>
                  <td>{{ lookUp.f007 }}</td>
                  <td>设计温度</td>
                  <td>{{ lookUp.f008 }}</td>
                </tr>
                <tr>
                  <td>操作压力</td>
                  <td>{{ lookUp.f009 }}</td>
                  <td>操作温度</td>
                  <td>{{ lookUp.f010 }}</td>
                </tr>
                <tr>
                  <td>主体材质</td>
                  <td>{{ lookUp.f011 }}</td>
                  <td>操作介质</td>
                  <td>{{ lookUp.f012 }}</td>
                </tr>
                <tr>
                  <td>公称壁厚</td>
                  <td>{{ lookUp.f013 }}
                  </td>
                  <td>腐蚀裕量</td>
                  <td>{{ lookUp.f014 }}</td>
                </tr>
                <tr>
                  <td>内   径</td>
                  <td>{{ lookUp.f015 }}</td>
                  <td>罐壁高度</td>
                  <td>{{ lookUp.f016 }}</td>
                </tr>
                <tr>
                  <td>焊缝系数</td>
                  <td>{{ lookUp.f017 }}</td>
                  <td>储罐图号</td>
                  <td>{{ lookUp.f018 }}</td>
                </tr>
                <tr>
                  <td>设计单位</td>
                  <td>{{ lookUp.f019 }}</td>
                  <td>设计日期</td>
                  <td>{{ lookUp.f020 }}</td>
                </tr>
                <tr>
                  <td>施工单位</td>
                  <td>{{ lookUp.f021 }}</td>
                  <td>施工规范</td>
                  <td>{{ lookUp.f022 }}》</td>
                </tr>
                <tr>
                  <td>验收日期</td>
                  <td>{{ lookUp.f023 }}</td>
                  <td>投用日期</td>
                  <td>{{ lookUp.f024 }}</td>
                </tr>
                <tr>
                  <td>主要检验依据
                  </td>
                  {{ lookUp.f028 }}
                  <td colspan="3"></td>
                </tr>
                <tr>
                  <td colspan="4">检查结果及建议:{{ lookUp.f034 }}</td>
                </tr>
                <tr>
                  <td>宏观检查 </td>
                  <td colspan="3">{{ lookUp.f029 }}</td>
                </tr>
                <tr>
                  <td>超声检查 </td>
                  <td colspan="3">{{ lookUp.f030 }}</td>
                </tr>
                <tr>
                  <td>漏磁检查  </td>
                  <td colspan="3">{{ lookUp.f031 }}</td>
                </tr>
                <tr>
                  <td>磁粉检查 </td>
                  <td colspan="3">{{ lookUp.f032 }}</td>
                </tr>
                <tr>
                  <td>声发射检查 </td>
                  <td colspan="3">{{ lookUp.f033 }}</td>
                </tr>
                <tr>
                  <td>建议 </td>
                  <td colspan="3">{{ lookUp.f034 }}</td>
                </tr>
                <tr>
                  <td>检验日期：</td>
                  <td>{{ lookUp.f025 }}</td>
                  <td>检验单位：</td>
                  <td>{{ lookUp.f027 }}</td>
                </tr>
              </table>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="args.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import {DataCloudSearchArgs, serachDataCloudList,
} from "../../../../api/chuguan/data-cloud";
import Breadcrumb from "../BreadCrumb/BreadCrumb.vue";

export default {
  name: "DataWarehouse",
  data() {
    return {
      lookUp:[],
      args: new DataCloudSearchArgs(),
      keywords: "",
      GasSerialId: "",
      GasId: "",
      tableData: [],
      total: 146,
      currentPage: 1,
      loading: false,
      showSearch: false, // 显示搜索界面。
      showDetail: false, //显示详情页面。
      naviBasicItems: [
        {text: "储罐"},
        {text: "数据仓储", to: "/chuguan/dataWarehouse"},
      ],
      naviItems: [],
      tabsClass: {
        checkData: "",
      },

      wordHtml: '',
      //点击定检数据加载所示的图片
      dialogTableVisible: false,
      timer:{},//用于控制模态框
    }

  },
  created() {
      // 搜索界面的一些参数的初始化
      this.naviItems = [...this.naviBasicItems];
      this.showSearch = true;
      this.showDetail = false;
      (this.args.SydwName = null),
      (this.args.chuguanId = null),
      (this.args.pageNum = 0),
      (this.args.pageSize = 10),
      this.args.num = 10;
       this.searchData()
  },
  components: {
    Breadcrumb,
  },
  methods: {
    lookUpData:function (rowData){
     this.dialogTableVisible=true
      this.lookUp=rowData;
    },
    handleDialogCloed:function (){

    },
    // 向后端发请求获得数据
    async searchData() {
      this.loading = true
      const res = await serachDataCloudList(this.args)
      this.loading = false
      // console.log(res)
      const list = res.data.data
      //this.total = total
      // 填充登记数据，定检数据，重装数据三列
      list.map((item) => {
        // item.monitoringData ='—'
        // item.spotCheckData = '—'
        // item.maintenanceData = '—'
        // item.regulatoryData = '—'
        // item.detectionData = '—'
        if(item.detectionData!= '' || item.detectionData != null){
          item.detectionData ='/'
        }


      });
      this.tableData = list
    },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.args.pageSize = pageSize
      this.searchData()
    },
    // 页数改变
    async pageChange(page) {
      console.log('现在是第 ', this.currentPage, ' 页')
      // this.args.pageSize = (page - 1) * this.args.num
      this.currentPage = page
      this.args.pageNum=page
      this.searchData()
    },

  },
};
</script>
<style lang="less" scoped>
div.container-search {
  padding: 20px;
  display: flex;
  flex-direction: column;
  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.table {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }
  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
  }
}

/**
下面三个CSS样式为走马灯效果：目的是读取word文档时使其以图片形式播放
 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
//走马灯效果在这停


</style>
